<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <base th:href="@{/}">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>用户信息</title>

    <link rel="stylesheet" type="text/css" th:href="@{/assets/css/bootstrap.min.css}">

    <link rel="stylesheet" type="text/css" th:href="@{/assets/fonts/line-icons.css}">

    <link rel="stylesheet" th:href="@{/assets/plugins/morris/morris.css}">

    <link rel="stylesheet" type="text/css" th:href="@{/assets/css/main.css}">

    <link rel="stylesheet" type="text/css" th:href="@{/assets/css/responsive.css}">

    <link rel="stylesheet" th:href="@{https://use.fontawesome.com/releases/v5.5.0/css/all.css}" crossorigin="anonymous">

    <script th:src="@{/assets/js/jquery-min.js}"></script>

    <script>
        function userInfoCheck(){
            var allTiShi = $("#allTiShi");
            var n = false;//全局变量，以便下面做判断

            var wechatNum = $("#wechatNum").val();

            var alipayNum = $("#alipayNum").val();

            var bankcardNum = $("#bankcardNum").val();

            if((bankcardNum==null || bankcardNum=='') && (alipayNum==null || alipayNum=='') && (wechatNum==null || wechatNum=='')){
                allTiShi.html("请至少绑定一种类型的支付账号");
                return false ;
            }else {

                if(alipayNum!=null && alipayNum!=''){
                   var alipayName =  $("#alipayName").val();
                   if(alipayName==null || alipayName==''){
                       var alipayNameTiShi = $("#alipayNameTiShi").html("支付宝账户名称不能为空");
                       return  false;
                   }
                }
                if(wechatNum!=null && wechatNum!=''){
                    var wechatName =  $("#wechatName").val();
                    if(wechatName==null || wechatName==''){
                        $("#wechatNameTiShi").html("微信账户名称不能为空");
                        return  false;
                    }
                }
                if(bankcardNum!=null && bankcardNum!=''){
                    var bankcardName =  $("#bankcardName").val();
                    if(bankcardName==null || bankcardName==''){
                        $("#bankcardNameTiShi").html("银行卡收款人不能为空");
                        return  false;
                    }
                }

                return  true;
            }

        }


        function clearShow(dom) {
            $("#allTiShi").html("");
            $("#"+dom).html("");
        }


    </script>

</head>
<body>
<div class="app header-default side-nav-dark">
    <div class="layout">
        <div class="header navbar">
            <div class="header-container">
                <ul class="nav-left">
                    <li>
                        <a href="javascript:history.back(-1);">
                            <i class="lni-chevron-left" style="border: transparent;"></i>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="page-container" style="padding: 64px 0 0 0!important;">
            <div class="main-content" style="padding-top: 15px!important;">
                <div class="container-fluid">
                    <div class="card">
                        <div class="card-header border-bottom">
                            <h4 class="card-title">用户账户绑定</h4>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-lg-10 col-md-12 col-xs-12">
                                    <p style="color: red;display: inline-block!important;font-size: 0.68rem;padding-left: 10px;margin-bottom: 0px;" id="allTiShi"></p>
                                    <form action="/front/user/surePaymentAccount" role="form" id="form-validation" novalidate="novalidate" th:object="${userEntity}" method="post" onsubmit="return userInfoCheck()">
                                        <div hidden="hidden">
                                            <input type="text" hidden="hidden" name="id" th:value="${userEntity.id}" id="id">
                                        </div>

                                        <div class="form-group row" >
                                            <label class="col-sm-2 col-form-label control-label">
                                                <span>支付宝账户名称</span>
                                                <p style="color: red;display: inline-block!important;font-size: 0.68rem;padding-left: 10px;margin-bottom: 0px;" id="alipayNameTiShi"></p>
                                            </label>
                                            <div class="col-sm-10">
                                                <div>
                                                    <input type="text" th:value="${userEntity.alipayName}" onfocus="clearShow('alipayNameTiShi')" class="form-control" name="alipayName" placeholder="支付宝账户名称" id="alipayName" maxlength="8">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label class="col-sm-2 col-form-label control-label">支付宝账号</label>
                                            <div class="col-sm-10">
                                                <div>
                                                    <input type="text" th:value="${userEntity.alipayNum}" class="form-control" name="alipayNum" placeholder="支付宝账号" id="alipayNum">
                                                </div>
                                            </div>
                                        </div>


                                        <div class="form-group row" >
                                            <label class="col-sm-2 col-form-label control-label">
                                                <span>微信收款人</span>
                                                <p style="color: red;display: inline-block!important;font-size: 0.68rem;padding-left: 10px;margin-bottom: 0px;" id="wechatNameTiShi"></p>
                                            </label>
                                            <div class="col-sm-10">
                                                <div>
                                                    <input type="text" th:value="${userEntity.wechatName}" class="form-control" name="wechatName" onfocus="clearShow('wechatNameTiShi')" placeholder="用户名称" id="wechatName" maxlength="8">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label class="col-sm-2 col-form-label control-label">微信收款人账号</label>
                                            <div class="col-sm-10">
                                                <div>
                                                    <input type="text" th:value="${userEntity.wechatNum}" class="form-control" name="wechatNum" placeholder="微信收款人账号" id="wechatNum">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label class="col-sm-2 col-form-label control-label">开户行</label>
                                            <div class="col-sm-10">
                                                <select name="bankcardType" class="form-control custom-select chosen" required style="color: #232323;">
                                                    <option th:each="para,paraStat : ${acctTypeParaEntityList}" th:selected="${userEntity.bankcardType==para.sequno}"  th:value="${para.sequno}" th:text="${para.parana}"></option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="form-group row" id="userNameBigDiv">
                                            <label class="col-sm-2 col-form-label control-label">
                                                <span>银行卡收款人</span>
                                                <p style="color: red;display: inline-block!important;font-size: 0.68rem;padding-left: 10px;margin-bottom: 0px;" id="bankcardNameTiShi"></p>
                                            </label>
                                            <div class="col-sm-10">
                                                <div>
                                                    <input type="text" th:value="${userEntity.bankcardName}" class="form-control" name="bankcardName" onfocus="clearShow('bankcardNameTiShi')" placeholder="银行卡收款人姓名" id="bankcardName" maxlength="8">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label class="col-sm-2 col-form-label control-label">银行卡收款人账号</label>
                                            <div class="col-sm-10">
                                                <div>
                                                    <input type="text" th:value="${userEntity.bankcardNum}" class="form-control" name="bankcardNum" placeholder="银行卡收款人账号" id="bankcardNum">
                                                </div>
                                            </div>
                                        </div>

                                        <button class="btn btn-outline-success" id="btn">
                                            <span>保存</span>
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<div id="preloader">
    <div class="loader" id="loader-1"></div>
</div>

<script th:src="@{/assets/js/popper.min.js}"></script>
<script th:src="@{/assets/js/bootstrap.min.js}"></script>
<script th:src="@{/assets/js/jquery.app.js}"></script>
<script th:src="@{/assets/js/main.js}"></script>

<script th:src="@{/assets/plugins/morris/morris.min.js}"></script>
<script th:src="@{/assets/plugins/raphael/raphael-min.js}"></script>
<!--<script th:src="@{/assets/js/dashborad1.js}"></script>-->

<script th:src="@{https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js}" crossorigin="anonymous"></script>

</body>

</html>